<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            height: 5000px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="box"></div>
<script>
    //单位时间执行一次
    var a = 1;
    function callback(){

        console.log('节流触发了');
    }
    //高阶函数 返回值或参数也是函数
    function throttle(cb,delay){
        // 闭包 cb delay 单位时间 计时 离上一次执行过去了多长时间
        let isScrolling,last //定时器 上一次执行 
       
        return function(args){
            this.a = 2;
            let that = this;//当前作用域
            let _args = arguments// 函数执行的时候 有的
            let now = +new Date()
            if (last && now< last +delay){
                clearTimeout(isScrolling);
                isScrolling = setTimeout(function()  {
                    last = now
                    // cb.apply(that,_args);
                }, delay);
            }
            else{
                last = now
                cb.apply(that,_args);//先执行一次
            }
        }

    }
    window.addEventListener('scroll',throttle(callback,100))
</script>
</body>
</html>